import { useEffect, useRef, useState } from "react";
import "./App.scss";
import avatar from "./images/bozai.png";
import _ from "lodash";
import classNames from "classnames";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
import axios from "axios";

// 当前登录用户信息
const user = {
	// 用户id
	uid: "30009257",
	// 用户头像
	avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
	// 用户昵称
	uname: "黑马前端",
};
// 导航 Tab 数组
const tabs = [
	{ type: "hot", text: "最热" },
	{ type: "time", text: "最新" },
];

// 子组件 Item
const Item = (props) => {
	const {item , onDel } = props
	console.log(item, onDel);
	return (
		<div className="reply-item">
			<div className="root-reply-avatar">
				<div className="bili-avatar">
					<img className="bili-avatar-img" src={item.user.avatar} />
				</div>
			</div>
			<div className="content-wrap">
				{/* 用户名 */}
				<div className="user-info">
					<div className="user-name">{item.user.uname}</div>
				</div>
				{/* 评论内容 */}
				<div className="root-reply">
					<span className="reply-content">{item.content}</span>
					<div className="reply-info">
						{/* 评论时间 */}
						<span className="reply-time">{item.ctime}</span>
						{/* 评论数量 */}
						<span className="reply-time">点赞数:{item.like}</span>

						{/* 
							删除的需求:
							只有自己的评论才显示删除
							*/}
						{user.uid === item.user.uid && (
							<span onClick={() => onDel(item.rpid)} className="delete-btn">
								删除
							</span>
						)}
					</div>
				</div>
			</div>
		</div>
	);
};

function App() {
	// 初始化数据列表
	const [dataList, setdataList] = useState([]);

	useEffect(() => {
		const getList = async () => {
			const res = await axios.get("http://localhost:3004/list");
			setdataList(res.data);
		};
		getList();
	}, []);

	// 删除评论方法
	const delFn = id => {
		console.log(id);
		setdataList(dataList.filter(item => item.rpid !== id));
	};

	// 初始化type 实现tab高亮
	const [type, setType] = useState("hot");

	// tab切换 一个是样式切换 一个是数据重新排序
	const changeTab = type => {
		console.log(type);
		setType(type);
		// 重新排序
		// 使用lodash库
		// orderBy三个参数: 排序的数组  排序的属性  desc倒序 asc正序(默认)
		// 文档 https://www.lodashjs.com/docs/lodash.orderBy#_orderbycollection-iteratees_identity-orders
		type === "hot"
			? setdataList(_.orderBy(dataList, "like", "desc"))
			: setdataList(_.orderBy(dataList, "ctime", "desc"));
	};

	/* 
  发布功能
  先获取输入框输入的内容
  再改变数据列表
  */

	const [value, setValue] = useState("");

	const textRef = useRef(null);

	const putData = () => {
		console.dir(textRef.current);
		const option = {
			user,
			rpid: uuidV4(), // 随机id
			ctime: dayjs().format("MM-DD hh:mm"),
			like: Math.floor(Math.random() * 100 + 1), // 0-100随机整数
			content: value,
		};
		// 将输入内容添加到数据数组
		setdataList([...dataList, option]);
		// 清空输入框
		setValue("");
		textRef.current.focus();
	};

	return (
		<div className="app">
			{/* 导航tab */}
			<div className="reply-navigation">
				<ul className="nav-bar">
					<li className="nav-title">
						<span className="nav-title-text">评论</span>
						{/* 评论数量 */}
						<span className="total-reply">{10}</span>
					</li>
					<li className="nav-sort">
						{/* 高亮类名： active */}
						{tabs.map(item => (
							<span
								key={item.type}
								onClick={() => changeTab(item.type)}
								// 设置两个类名 classNames
								className={classNames("nav-item", {
									active: item.type === type,
								})}
							>
								{item.text}
							</span>
						))}
					</li>
				</ul>
			</div>

			<div className="reply-wrap">
				{/* 发表评论 */}
				<div className="box-normal">
					{/* 当前用户头像 */}
					<div className="reply-box-avatar">
						<div className="bili-avatar">
							<img className="bili-avatar-img" src={avatar} alt="用户头像" />
						</div>
					</div>
					<div className="reply-box-wrap">
						{/* 评论框 */}
						<textarea
							className="reply-box-textarea"
							placeholder="发一条友善的评论"
							value={value}
							onChange={e => setValue(e.target.value)}
							ref={textRef}
						/>
						{/* 发布按钮 */}
						<div className="reply-box-send">
							<div onClick={putData} className="send-text">
								发布
							</div>
						</div>
					</div>
				</div>
				{/* 评论列表 */}
				<div className="reply-list">
					{/* 评论项 */}
					{dataList.map(item => (
						// 子组件修改父组件的值  组件通信
						<Item key={item.rpid} onDel={delFn}  item={item} />
					))}
				</div>
			</div>
		</div>
	);
}

export default App;
